<template>
  <div style="height:450px;width:100%">
    <el-row :gutter="4">
      <el-col :xs="12" :sm="12" :lg="12">
        <img src="https://element.eleme.cn/2.0/static/hamburger.50e4091.png" class="image">
      </el-col>
      <el-col :xs="12" :sm="12" :lg="12">
        <img :src="data.face_pic" class="image">
      </el-col>
    </el-row>
    <el-row>
      <el-col :xs="12" :sm="12" :lg="12" class="workinfo-span">
        <span class="workinfo-span">姓名：</span>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="12">
        <span class="workinfo-span">{{data.worker_name}}</span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :xs="12" :sm="12" :lg="12" class="workinfo-span">
        <span class="workinfo-span">部门：</span>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="12">
        <span class="workinfo-span">{{data.deptName}}</span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :xs="12" :sm="12" :lg="12" class="workinfo-span">
        <span class="workinfo-span">职位：</span>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="12">
        <span class="workinfo-span">{{data.jobName}}</span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :xs="12" :sm="12" :lg="12" class="workinfo-span">
        <span class="workinfo-span">事件：</span>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="12">
        <span class="workinfo-span">{{data.label}}</span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :xs="12" :sm="12" :lg="12" class="workinfo-span">
        <span class="workinfo-span">时间：</span>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="12">
        <span class="workinfo-span">{{parseTime(data.pass_time)}}</span>
      </el-col>
    </el-row>
  </div>

</template>

<script>
  import {getLast} from '@/api/workerAttendance';
  import {parseTime} from '@/utils/index';
  export default {
    data() {
      return {
        data: {}
      }
    },
    created() {
      this.$nextTick(() => {
        this.getLast();
      })
      setTimeout(() => {
        this.getLast();
      }, 10000);
    },
    mounted() {

    },
    methods: {
      parseTime,
      getLast() {
        getLast().then(res => {
          this.data = res;
        }).catch(err => {
          console.log(err.response.data.message)
        })
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .image {
    width: 100%;
    height: 300px;
    padding-bottom: 8px;
  }

  .workinfo-span {
    text-align: right;
    font-size: 18px;
    padding-bottom: 4px;
  }
</style>
